<template>
    <div class="statistics-mission-detail">
        <el-card shadow="never" class="filter">
            <div class="page-title mb-8">
                {{ data.user_name }}{{ data.identity ? `@${data.identity}` : '' }} 的指派学习任务
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="`未认证(${data.not_certified_num || 0})`" name="not_certifieds"></el-tab-pane>
                <el-tab-pane :label="`已认证(${data.certified_num || 0})`" name="certifieds"></el-tab-pane>
                <el-tab-pane :label="`未提交(${data.not_submitted_num || 0})`" name="not_submitted"></el-tab-pane>
            </el-tabs>
            <div class="content flex flex-wrap mt-4">
                <div class="card flex" v-for="item in cardData" :key="item.course_id" @click="toDetail(item.course_id)">
                    <div class="self-center">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            placement="top-start">
                            <div slot="content">
                                <div class="my-2" v-for="(val, i) in item.labels" :key="i">学习路径名：{{ val }}</div>
                            </div>
                            <div class="title">{{ item.labels | labelsName }}</div>
                        </el-tooltip>
                        <div class="desc">{{ item.theme }}</div>
                    </div>
                    <div class="describe ml-auto" v-if="activeName === 'certifieds'">
                        <el-tooltip effect="dark" placement="top">
                            <div slot="content">
                                <div v-for="(val, j) in item.attest_info" :key="j">{{ val }}</div>
                            </div>
                            <div>
                                <div class="num">{{ item.certified_num }}</div>
                                <div class="describe-desc">获取认证</div>
                            </div>
                        </el-tooltip>
                    </div>
                </div>
            </div>
        </el-card>

        <div class="text-center mt-4">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
import { Tabs, TabPane, Tooltip } from 'element-ui';

export default {
    components: {
        ElTabs: Tabs,
        ElTabPane: TabPane,
        ElTooltip: Tooltip,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            activeName: 'not_certifieds',
            loading: false,
            data: {},
            form: {
                activeName: 'not_certifieds',
                size: 10,
            },

            cardData: [],
        };
    },
    filters: {
        /**
         * 过滤掉为空的路径名
        */
        labelsName(list) {
            if (!list || !list.length) return '';
            for (const val of list) {
                if (val) return val;
            }
            return '';
        },
    },
    watch: {
        activeName(e) {
            this.loading = true;
            this.form.activeName = e;
            setTimeout(() => {
                this.loading = false;
            }, 0);
        },
    },
    methods: {
        handleClick() {
            this.cardData = this.data[this.activeName];
        },
        fetchData() {
            this.loading = true;
            API.get(`task/user/tasks/${this.id}`).then((res) => {
                this.data = res;
                if (this.$route.query.activeName) this.activeName = this.$route.query.activeName;
                this.cardData = res[this.activeName];
            }).finally(() => {
                this.loading = false;
            });
        },

        toDetail(id) {
            this.$router.push({
                name: 'StatisticsMissionSection',
                params: {
                    id,
                },
                query: {
                    userId: this.id,
                },
            });
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        if (this.id) this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.statistics-mission-detail {
    .content {
        width: calc(100% + 46px);
    }

    .card {
        width: 470px;
        min-height: 120px;
        padding: 19px 0 19px 24px;
        box-sizing: border-box;
        box-shadow: 0 0 6px 2px rgb(232, 233, 238);
        border-radius: 6px;
        margin: 0 46px 26px 0;

        &:hover {
        box-shadow: 0 0 15px 2px rgb(232, 233, 238);
        }

        .title {
            font-size: 18px;
            color: rgb(153, 157, 164);
            margin-bottom: 11px;
        }

        .desc {
            font-size: 20px;
            color: rgb(96, 98, 102);
        }
    }

    .describe {
        display: flex;
        align-items: center;
        width: 104px;
        border-left: 1px solid rgb(221, 223, 230);
        text-align: center;

        .num {
            font-size: 30px;
            margin-bottom: 7px;
            color: rgb(24, 144, 255);
        }

        &-desc {
            font-size: 14px;
            color: rgb(96, 98, 102);
        }

        .el-tooltip {
            width: 100%;
        }
    }
}
</style>
